<template>
  <div>
    <el-form ref="resultForm" :model="formItem" :rules="rules" label-width="100px" size="mini">
      <el-row :gutter="40">
        <el-col :span="24">
          <el-form-item label="选择班次" prop="classesCode">
            <el-select v-model="formItem.classesCode" clearable filterable remote placeholder="请选择值班班次">
              <el-option v-for="(item) in classesList" :key="item.code" :label="item.name" :value="item.code" />
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="24">
          <el-form-item label="选择班组" prop="teamGroupId">
            <el-select v-model="formItem.teamGroupId" clearable filterable remote placeholder="请选择值班组">
              <el-option v-for="(item) in teamGroupList" :key="item.teamGroupId" :label="item.teamGroupName" :value="item.teamGroupId" />
            </el-select>
          </el-form-item>
        </el-col>
        <el-col v-if="id !== -1" :span="24">
          <el-form-item label="操作选择">
            <el-radio v-model="action" label="1">编辑</el-radio>
            <el-radio v-model="action" label="2">删除</el-radio>
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>

  </div>
</template>

<script>
import { detail } from '@neu/dcom-ui/api/dutyArrangement'
import { detail as resultDetail, update, create, remove } from '@neu/dcom-ui/api/dutyArrangementResult'
import { detail as classesDetail } from '@neu/dcom-ui/api/classes'

// 定义一个表单原始项
const formItem = {
  teamGroupId: null,
  classesCode: null,
  classesName: '',
  startTime: null,
  endTime: null,
  dutyArrangementId: null
}

export default {
  name: 'AddResultForm',
  props: {
    // 根据id可判断是新建还是更新
    dutyArrangementId: {
      required: true,
      type: Number,
      default: -1
    },
    // 根据id可判断是新建还是更新
    id: {
      required: false,
      type: Number,
      default: -1
    }
  },
  data() {
    return {
      // 编辑的表单内容
      formItem: {
        ...formItem
      },
      /** 值班组列表 */
      teamGroupList: [],
      /** 班次列表 */
      classesList: [],
      // 表单验证规则
      rules: {
        teamGroupId: [{
          required: true,
          message: '班组不能为空',
          trigger: 'blur'
        }],
        classesCode: [{
          required: true,
          message: '班次不能为空',
          trigger: 'blur'
        }]
      },
      action: '1'
    }
  },
  watch: {
    // 监控id的变化，初始化表单数据
    id: {
      handler() {
        console.log(this.id)
        this.fetch()
      },
      immediate: true
    }
  },
  // 初始化加载数据
  created() {
    // 加载基本信息
    this.initData()
  },
  methods: {
    // 初始化表单数据
    fetch() {
      if (this.id !== -1) {
        resultDetail(this.id).then(response => {
          this.formItem = {
            ...response.data
          }
        })
      } else {
        this.formItem = {
          ...formItem
        }
      }
    },
    // 保存操作，返回promise，后续处理交由调用者处理
    save(selectDate) {
      const updated = this.id !== -1
      return new Promise(resolve => {
        if (updated) {
          if (this.action === '2') {
            resolve(remove(this.id))
          } else {
            this.$refs.resultForm.validate((valid) => {
              if (valid) {
                const saveData = this.generateSaveData(selectDate)
                resolve(update(this.id, saveData))
              } else {
                resolve(false)
              }
            })
          }
        } else {
          this.$refs.resultForm.validate((valid) => {
            if (valid) {
              const saveData = this.generateSaveData(selectDate)
              resolve(create(saveData))
            } else {
              resolve(false)
            }
          })
        }
      })
    },
    /** 初始化数据 */
    initData() {
      detail(this.dutyArrangementId).then(response => {
        const data = { ...response.data }
        // 小组数据
        this.teamGroupList = data.groups
        // 班次信息
        classesDetail(data.classesId).then(res => {
          this.classesList = res.data.items
        })
      })
    },
    reset() {
      this.$refs.resultForm.resetFields()
      this.formItem = {
        teamGroupId: null,
        classesCode: null,
        classesName: '',
        startTime: null,
        endTime: null,
        dutyArrangementId: null
      }
      this.action = '1'
    },
    /** 生成后台数据 */
    generateSaveData(date) {
      const currentDate = new Date(date)
      const currentDate1 = new Date(date)
      const saveData = { ...this.formItem }
      const filterData = this.classesList.filter(ele => ele.code === this.formItem.classesCode)
      debugger
      if (filterData.length === 1) {
        saveData.classesName = filterData[0].name
        // 生成时间
        const start = filterData[0].startTime
        const end = filterData[0].endTime
        currentDate.setHours(Number(start.substr(0, 2)))
        currentDate.setMinutes(Number(start.substr(3, 5)))
        currentDate.setSeconds(0)
        currentDate.setMilliseconds(0)
        saveData.startTime = currentDate

        currentDate1.setHours(Number(end.substr(0, 2)))
        currentDate1.setMinutes(Number(end.substr(3, 5)))
        currentDate1.setSeconds(0)
        currentDate1.setMilliseconds(0)
        saveData.endTime = currentDate1
      }
      saveData.dutyArrangementId = this.dutyArrangementId

      return saveData
    }
  }
}
</script>

